<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="./js/layui/css/layui.css" media="all">
		<style>
			.layui-nav-tree {
				vertical-align: top;
			}
		</style>
	</head>
	<body>

		<fieldset class="layui-elem-field">
			<legend>layui</legend>
			<div class="layui-field-box">

				<label class="layui-form-label">姓名</label>
				<div class="layui-inline">
					<input id="inputname" type="text" name="title" required lay-verify="required" placeholder="请输入名字"
						autocomplete="off" class="layui-input">
				</div>
				<form class="layui-form">
					<div class="layui-form-item">
						<label class="layui-form-label">地址</label>
						<div class="layui-inline">
							<select name="address" id="inputaddress">
								<option value=""></option>
								<option value="北京">北京</option>
								<option value="上海">上海</option>
								<option value="广州">广州</option>
								<option value="深圳">深圳</option>
								<option value="杭州">杭州</option>
							</select>
						</div>
					</div>
				</form>



				<div class="layui-form-item">
					<div class="layui-input-block">
						<button id="selbut" class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
						<button id="tanbut" class="layui-btn layui-btn-primary" lay-submit
							lay-filter="formDemo">添加</button>
					</div>
				</div>

				<table class="layui-table" id="mytable">
					<colgroup>
						<col width="150">
						<col width="200">
						<col>
					</colgroup>
					<thead>
						<tr>
							<th>id</th>
							<th>姓名</th>
							<th>性别</th>
							<th>爱好</th>
							<th>地址</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">

					</tbody>
				</table>


				<script type="text/javascript" src="./js/layui/layui.js"></script>

				<script type="text/html" id="tanhtml">
					<form class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">姓名</label>
							<div class="layui-inline">
								<input type="text" name="name" required lay-verify="required" placeholder="请输入名字" autocomplete="off"
									class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">地址</label>
							<div class="layui-inline">
								<select name="address">
									<option value=""></option>
									<option value="北京">北京</option>
									<option value="上海">上海</option>
									<option value="广州">广州</option>
									<option value="深圳">深圳</option>
									<option value="杭州">杭州</option>
								</select>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">爱好</label>
							<div class="layui-inline">
								<input type="checkbox" name="hobby1" title="羽毛球" value="羽毛球" />
								<input type="checkbox" name="hobby2" title="游泳" value="游泳" />
								<input type="checkbox" name="hobby3" title="跑步" value="跑步" />
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">性别</label>
							<div class="layui-inline">
								<input type="radio" name="sex" value="男" title="男" checked />
								<input type="radio" name="sex" value="女" title="女" />
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit lay-filter="add">提交</button>
								<button type="reset" class="layui-btn layui-btn-primary">重置</button>
							</div>
						</div>

					</form>
				</script>

				<script type="text/html" id="tanupdhtml">
					<form class="layui-form" lay-filter="tanupdform">
						<div class="layui-form-item">
							<label class="layui-form-label">姓名</label>
							<div class="layui-inline">
								<input type="text" name="updname" required lay-verify="required" autocomplete="off" class="layui-input"
									placeholder="请输入名字">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">地址</label>
							<div class="layui-inline">
								<select name="updaddress">
									<option value=""></option>
									<option value="北京">北京</option>
									<option value="上海">上海</option>
									<option value="广州">广州</option>
									<option value="深圳">深圳</option>
									<option value="杭州">杭州</option>
								</select>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">爱好</label>
							<div class="layui-inline">
								<input type="checkbox" name="updhobby1" title="羽毛球" value="羽毛球" />
								<input type="checkbox" name="updhobby2" title="游泳" value="游泳" />
								<input type="checkbox" name="updhobby3" title="跑步" value="跑步" />
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">性别</label>
							<div class="layui-inline">
								<input type="radio" name="updsex" value="男" title="男" checked />
								<input type="radio" name="updsex" value="女" title="女" />
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit lay-filter="upd">提交</button>
							</div>
						</div>

					</form>
				</script>


				<script>
					var element = layui.element;
					var $ = layui.jquery;
					var form = layui.form;
					var layer = layui.layer;
					// var table = layui.table;
					var id = 1;
					form.render();

					$("#tanbut").click(tan);
					$("#tanupdbut").click(tanupd, id);
					$("#selbut").click(sel);

					function tan() {
						layer.open({
							type: 1,
							area: ['500px', '500px'],
							content: $("#tanhtml").html(),
							title: "添加",
							success: function(index) {
								form.render();
								add(index);
								// layer.close(index);
							},
							
						});
					}

					function tanupd(idd) {
						layer.open({
							type: 1,
							area: ['500px', '500px'],
							content: $("#tanupdhtml").html(),
							// closeBtn:1,
							title: "修改",
							success: function(index) {
								// console.log(idd);
								var hobby_val = ($("#td4" + idd).text());
								var hobby1 = false;
								var hobby2 = false;
								var hobby3 = false;
								if (hobby_val.indexOf("羽毛球") != -1) {
									hobby1 = true;
								}
								if (hobby_val.indexOf("游泳") != -1) {
									hobby2 = true;
								}
								if (hobby_val.indexOf("跑步") != -1) {
									hobby3 = true;
								}
								// if(hobby_val.contains())
								var outdata = {
									updname: $("#td2" + idd).text(),
									updsex: $("#td3" + idd).text(),
									updaddress: $("#td5" + idd).text(),
									updhobby1: hobby1,
									updhobby2: hobby2,
									updhobby3: hobby3
								}
								form.val("tanupdform", outdata);
								form.render();
								upd(idd);
							}
						});
					}

					function add(index) {
						form.on('submit(add)', function(data) {
							var indata = data.field;
							var hobby_val = "";
							hobby_val += indata.hobby1 ? indata.hobby1 + ' ' : "";
							hobby_val += indata.hobby2 ? indata.hobby2 + ' ' : "";
							hobby_val += indata.hobby3 ? indata.hobby3 + ' ' : "";
							// console.log(hobby_val);

							var html = "" +
								"<tr id='tr" + id + "'><td>" + id + "</td>" +
								"<td id='td2" + id + "'>" + indata.name + "</td>" +
								"<td id='td3" + id + "'>" + indata.sex + "</td>" +
								"<td id='td4" + id + "'>" + hobby_val + "</td>" +
								"<td id='td5" + id + "'>" + indata.address + "</td>" +
								"<td id='td6" + id + "'><a href='javascript:del(" + id + ");' class='layui-btn'>删除</a>  " +
								"<a href='javascript:tanupd(" + id + ");' class='layui-btn'>修改</a>" +
								"</td></tr>";

							id++;
							$("#tbody").append(html);
							// console.log(id);
							
							// layer.close(index);
							return false;
						});
					}

					function del(idd) {
						var tr = $("#tr" + idd);
						if (layer.confirm("确实删除？")) {
							tr.remove();
						}
					}

					function upd(idd) {
						form.on('submit(upd)', function(data) {
							var indata = data.field;

							var hobby_val = "";
							hobby_val += indata.updhobby1 ? indata.updhobby1 + ' ' : "";
							hobby_val += indata.updhobby2 ? indata.updhobby2 + ' ' : "";
							hobby_val += indata.updhobby3 ? indata.updhobby3 + ' ' : "";
							// console.log(hobby_val);

							// console.log(td2);
							// console.log(td2.text());
							$("#td2" + idd).text(indata.updname);
							$("#td3" + idd).text(indata.updsex);
							$("#td4" + idd).text(hobby_val);
							$("#td5" + idd).text(indata.updaddress);
							return false;
						});



					}

					function sel() {
						$("tbody tr").css("background", "");
						var name = $("#inputname").val();
						var address = $("#inputaddress").val();
						if (name == "") return;
						// console.log(name+address);

						for (var i = 1; i < id; i++) {
							var td1 = $("#td2" + i).text();
							var td2 = $("#td5" + i).text();
							if (td1.indexOf(name) > -1) {
								if (td2 == address) {
									$("#tr" + i).css("background", "red");
								}

							}

						}
					}
				</script>

	</body>
</html>
